{include file='public/header'/}
<div style="padding: 15px;margin: 15px;background-color: #fff;">
    <!-- 搜索框 -->
    <div class="layui-form" style="border-bottom:1px solid #f6f6f6">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">键</label>
                <div class="layui-input-block">
                    <input type="text" name="meta_key" value="" placeholder="请输入键" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">值</label>
                <div class="layui-input-block">
                    <input type="text" name="meta_value" value="" placeholder="请输入值" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button type="submit" lay-submit lay-filter="search" class="layui-btn">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 数据表格 -->
    <table id="dataTable" lay-filter="dataTable"></table>

    <!-- 头工具栏 -->
    <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="delAll">批量删除</button>
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon layui-icon-refresh"></i></button>
        </div>
    </script>

    <!-- 行工具 -->
    <script type="text/html" id="databar">
        <a class="layui-btn layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

</div>

<!-- js -->
<script>
    layui.use(['table', 'form', 'util'], function () {
        var table = layui.table
            , form = layui.form
            , util = layui.util
            , $ = layui.jquery;

        // 获取应用、控制器和方法
        var module = '{:app("http")->getName()}'
            , controller = '{$Request.controller}'
            , action = '{$Request.action}';

        // 渲染表格
        table.render({
            elem: '#dataTable'
            , toolbar: '#toolbar'
            , defaultToolbar: ['filter', 'exports', 'print']
            , cellMinWidth: 80
            , height: 'full'
            , where: { search: '' } //搜索
            , title: $(document).title //标题
            , page: $('button[lay-filter="search"]').length ? true : false //开启分页
            , url: '/' + module + '/' + controller + '/' + action //请求路径
            , cols: [
                [{
                    checkbox: true,
                    fixed: 'left',
                }, {
                    field: 'id',
                    title: 'ID',
                    sort: true,
                    width: 80,
                }, {
                    field: 'meta_key',
                    title: '键',
                    edit: false,
                }, {
                    field: 'meta_value',
                    title: '值（可修改）',
                    edit: 'text',
                }, {
                    field: 'status',
                    title: '状态',
                    sort: true,
                    width: 95,
                    templet: function (res) {
                        return '<input type="checkbox" name="status" lay-filter="status" value="' + res.id + '" lay-skin="switch" lay-text="启用|禁用"' + (res.status == 0 ? ' checked' : '') + '>';
                    }
                }, {
                    field: 'time',
                    title: '时间',
                    sort: true,
                }, {
                    title: '操作',
                    align: 'center',
                    width: 120,
                    toolbar: '#databar'
                }]
            ]
        });

        // 头工具栏事件
        table.on('toolbar(dataTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;

            // 头工具栏批量删除
            if (obj.event === 'delAll') {
                if (data.length === 0) {
                    return layer.msg('请选择数据');
                }
                layer.confirm('确定删除吗？', { icon: 3 }, function (index) {
                    var ids = [];
                    data.forEach(elem => { ids.push(elem.id); });
                    $.post('/' + module + '/' + controller + '/del', { id: ids }, function (res) {
                        if (res.code) return layer.msg(res.msg, { icon: 2 });
                        layer.msg(res.msg);
                        table.reload(obj.config.id);
                    }, 'json');
                });
            }

            // 头工具栏添加
            if (obj.event === 'add') {
                layer.open({
                    type: 2,
                    maxmin: true,
                    title: '添加',
                    shadeClose: true,
                    shade: 0.3,
                    area: $(window).width() <= 480 ? ['95%', '80%'] : ['480px', '450px'],
                    content: '/' + module + '/' + controller + '/add',
                });
            }

            // 头工具栏刷新
            if (obj.event === 'refresh') {
                table.reload(obj.config.id);
            }

        });

        // 监听行工具事件
        table.on('tool(dataTable)', function (obj) {
            var data = obj.data;

            // 行工具删除行
            if (obj.event === 'del') {
                layer.confirm('真的删除行么？', { icon: 3 }, function (index) {
                    layer.close(index);
                    $.post('/' + module + '/' + controller + '/del', { id: data.id }, function (res) {
                        if (res.code) return layer.msg(res.msg, { icon: 2 });
                        obj.del();
                        layer.msg(res.msg);
                    }, 'json');
                });
            }

            // 行工具当前添加
            else if (obj.event === 'add') {
                layer.open({
                    type: 2,
                    title: '添加',
                    shadeClose: true,
                    shade: 0.3,
                    area: $(window).width() <= 480 ? ['95%', '80%'] : ['480px', '450px'],
                    content: '/' + module + '/' + controller + '/add?id=' + data.id,
                });
            }

            // 行工具编辑行
            else if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    maxmin: true,
                    title: '编辑',
                    shadeClose: true,
                    shade: 0.3,
                    area: $(window).width() <= 480 ? ['95%', '80%'] : ['480px', '450px'],
                    content: '/' + module + '/' + controller + '/edit?id=' + data.id,
                });
            }

            // 行工具详情页
            else if (obj.event === 'detail') {
                window.open('/' + controller + '/' + (typeof data.slug !== 'undefined' ? data.slug : data.id) + '.html', '_blank');
            }

            // 行工具跳转
            else if (obj.event) {
                window.location.href = '/' + module + '/' + controller + '/' + obj.event + '?id=' + data.id;
            }
        });

        // 监听单元格编辑
        table.on('edit(dataTable)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            $.post('/' + module + '/' + controller + '/save_edit', {id: data.id, field: field, value: util.escape(value)}, function (res) {
                if (res.code) {
                    layer.alert(res.msg, { icon: 2 });
                    setTimeout(function () {
                        table.reload('dataTable');
                        layer.close();
                    }, 1000);
                    return;
                }
                layer.msg(res.msg);
            }, 'json');
        });

        // 列表开关事件
        form.on('switch(status)', function (obj) {
            $.post('/' + module + '/' + controller + '/modify', { id: this.value, field: 'status', value: obj.elem.checked ? 0 : 1 }, function (res) {
                if (res.code) {
                    layer.alert(res.msg, { icon: 2 });
                    setTimeout(function () {
                        table.reload('dataTable');
                        layer.close();
                    }, 1000);
                    return;
                }
                layer.msg(res.msg);
            }, 'json');
        });

        // 监听搜索框事件
        form.on('submit(search)', function (obj) {
            var field = obj.field;
            table.reload('dataTable', { where: { search: field } }); //搜索重载
            return false;
        });

    });

</script>

{include file='public/footer'/}